import styled from "styled-components";
export const HeaderWrapper = styled.div`
  position: relative;
  border-bottom: 1px solid ${props => props.theme.isTop ? 'transparent' :'#ddd'};
  color: ${props => props.isTop ? 'white' : 'inherit'};
  .content{
    background-color: ${props => props.theme.isTop ? 'transparent' : '#fff'};;
    position: relative;
    z-index: 99;
    .top {
      height: 80px;
      display: flex;
      align-items: center;

    }
    .bottom {
      height: ${props => props.isTopSearch ?'100px':'0'};
      transition: height 250ms ease;
    }
  }

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    right: 0;
  }
  .cover {
    position: fixed;
    top: 180px;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 19;
  }

`